<template>
    <el-dialog v-model="dialogVisible" title="工单详情" width="800" @close="closeDialog">
        <div class="box">
            <div class="work-order-info">
                <el-text class="mx-1" type="primary" size="large">基本信息</el-text>
                <div class="table">
                    <div class="row">
                        <div class="block label">工单编号：</div>
                        <div class="block content">{{ info.order_no }}</div>
                        <div class="block label">工单名称：</div>
                        <div class="block content">{{ info.title }}</div>
                    </div>
                    <div class="row">
                        <div class="block label">工单类型：</div>
                        <div class="block content">{{ info.cate_name }}</div>
                        <div class="block label">创建时间：</div>
                        <div class="block content">{{ info.submit_time }}</div>
                    </div>
                    <div class="row">
                        <div class="block label">对接人：</div>
                        <div class="block content">{{ info.user_name }}</div>
                        <div class="block label">对接人电话：</div>
                        <div class="block content">{{ info.user_phone }}</div>
                    </div>
                    <div class="row">
                        <div class="block label">处理人：</div>
                        <div class="block content">{{ info.text_legal_name }}</div>
                        <div class="block label">群聊名称：</div>
                        <div class="block content">{{ info.group_name }}</div>
                    </div>
                    <div class="row">
                        <div class="block label">预计完成时间：</div>
                        <div class="block content">{{ info.plan_time }}</div>
                        <div class="block label">状态：</div>
                        <div class="block content" v-if="info.status == 1">初审中</div>
                        <div class="block content" v-if="info.status == 2">已完结</div>
                        <div class="block content" v-if="info.status == 4" style="color: #f00;">已撤销</div>
                    </div>
                    <div class="row">
                        <div class="block label">完结时间：</div>
                        <div class="block content">{{ info.handle_time }}</div>
                        <div class="block label">创建人：</div>
                        <div class="block content">{{ info.creator_name }}</div>
                    </div>
                    <div class="row">
                        <div class="block label">特殊要求及备注：</div>
                        <div class="block content">{{ info.remark }}</div>
                    </div>
                </div>
                <el-card style="margin-top: 10px;">
                    <template #header>
                        <div class="card-header">
                            <span>原附件</span>
                        </div>
                    </template>
                    <ul class="file">
                        <li v-for="(item, index) in info.file_json" :key="index">
                            <p>{{ item.original_name }}</p>
                            <a :href="item.url" target="_blank">下载</a>
                        </li>
                    </ul>
                </el-card>
                <el-card style="margin-top: 10px;" v-if="info.status == 2">
                    <template #header>
                        <div class="card-header">
                            <span>处理附件</span>
                        </div>
                    </template>
                    <ul class="file">
                        <li v-for="(item, index) in info.handle_file_json" :key="index">
                            <p>{{ item.original_name }}</p>
                            <a :href="item.url" target="_blank">下载</a>
                        </li>
                        <li v-for="(item, index) in info.supplement" :key="index">
                            <p>{{ item.original_name }}</p>
                            <a :href="item.url" target="_blank">下载</a>
                        </li>
                    </ul>
                </el-card>
                <el-card style="margin-top: 10px;" v-if="info.status == 2">
                    <template #header>
                        <div class="card-header">
                            <span>处理内容</span>
                        </div>
                    </template>
                    <div class="content" v-html="info.handle_opinion"></div>
                </el-card>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { getWorkOrder, WorkOrderHandle, WorkOrderOperation } from '@/api';
import { defineEmits, ref, watchEffect } from '../../../adapter-vue';
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    woId: {
        type: String,
        default: '',
    }
});
const emits = defineEmits(['closeDialog']);
const dialogVisible = ref(false)
const workOrderId = ref('')
const tabList = ref([{
    label: '工单详情',
    name: 'tab1'
}, {
    label: '操作日志',
    name: 'tab2'
}, {
    label: '处理记录',
    name: 'tab3'
}, {
    label: '选中聊天内容',
    name: 'tab5'
}])
const activeName = ref('tab1');
const info = ref({});
const operationList = ref([]);
const handleList = ref([]);

watchEffect(() => {
    dialogVisible.value = props.visible;
    workOrderId.value = props.woId;
    if (workOrderId.value) {
        workOrderInfo(workOrderId.value);
    }
})

function workOrderInfo(e: any) {
    getWorkOrder({
        id: e
    }).then(res => {
        info.value = res.data
        if (info.value.status == 2) {
            tabList.value = [{
                label: '工单详情',
                name: 'tab1'
            }, {
                label: '操作日志',
                name: 'tab2'
            }, {
                label: '处理记录',
                name: 'tab3'
            }, {
                label: '补充材料',
                name: 'tab4'
            }, {
                label: '选中聊天内容',
                name: 'tab5'
            }]
        }
    })

    WorkOrderOperation({
        id: e
    }).then(res => {
        operationList.value = res.data
    })

    WorkOrderHandle({
        id: e
    }).then(res => {
        handleList.value = res.data
    })
}

function closeDialog(){
    dialogVisible.value = false
    info.value = {}
    activeName.value = 'tab1'
    workOrderId.value = ''
    emits('closeDialog')
}
</script>
<style lang="scss" scoped>

a {
    color: #679ce1;
}

.box {
    height: 550px;
    overflow-y: auto;

    .file {
        li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 30px;
        }
    }
}

.work-order-info {

    .table {
        border-top: solid 1px #ccc;
        border-left: solid 1px #ccc;
        margin-top: 10px;

        .row {
            display: flex;

            .block {
                border-right: solid 1px #ccc;
                border-bottom: solid 1px #ccc;
                padding: 10px;

                &.label {
                    width: 130px;
                    background-color: #eee;
                }

                &.content {
                    flex: 1;
                }
            }
        }
    }


}
</style>
